import React, {useEffect, useState} from 'react'
import {Form, Button, Input, Modal, Table, Row, Col, Card} from 'antd'
import { connect } from 'umi'
import moment from 'moment';
import {jobLevelDetailTypeList} from '@/utils/constant';
import {getBatchDetail} from '../../../service'

const FormItem = Form.Item
const {TextArea} = Input;
const formLayout = {
  labelCol: {span: 7},
};

const colStyle = {
  xl: 8,
  lg: 8,
  md: 8,
  sm: 8,
  xs: 8,
};

const Details = (props) => {

  const {id, onCancel, visible, global = {}} = props
  const {options = {}} = global;
  const {jobLevel = []} = options;
  const [data, setData] = useState([]);
  const [form] = Form.useForm();
  const [fileUrl,setFileUrl] = useState();

  useEffect(() => {
    if(id){
      getBatchDetail(id).then(res =>{
        let data = res.data;
        setFileUrl(data.fileUrl);
        form.setFieldsValue({...data});
        setData(data.promotionList ? data.promotionList : []);
      });
    }
  }, [visible]);

  const onFormCancel = () =>{
    onCancel();
  };

  const columns = [
    {
      title: '序号',
      dataIndex: 'promotionId',
      hideInSearch: true,
    },
    {
      title: '工号',
      dataIndex: 'code',
      hideInSearch: true,
    },
    {
      title: '姓名',
      dataIndex: 'name',
    },
    {
      title: '晋升类型',
      dataIndex: 'promotionType',
      hideInSearch: true,
      render: (text, record) => {
        const res = jobLevelDetailTypeList.find((item) => item.value === parseInt(text));
        return res ? res.label : text
      },
    },
    {
      title: '晋级前部门',
      dataIndex: 'beforeUnitName',
      hideInSearch: true,
    },
    {
      title: '晋级后部门',
      dataIndex: 'afterUnitName',
      hideInSearch: true,
    },
    {
      title: '晋级前岗位',
      dataIndex: 'beforeJobName',
      hideInSearch: true,
    },
    {
      title: '晋级后岗位',
      dataIndex: 'afterJobName',
      hideInSearch: true,
    },
    {
      title: '晋级前专业职级',
      dataIndex: 'beforeJobLevelId',
      hideInSearch: true,
      render: (text) => {
        const res = jobLevel.find((item) => item.id === text)
        return res ? res.name : text
      },
    },
    {
      title: '晋级后专业职级',
      dataIndex: 'afterJobLevelId',
      hideInSearch: true,
      render: (text) => {
        const res = jobLevel.find((item) => item.id === text)
        return res ? res.name : text
      },
    },
    {
      title: '晋级日期',
      dataIndex: 'promotionDate',
      render: (text) => {
        return text ? moment(text).format('YYYY-MM-DD') : ''
      },
      hideInSearch: true,
    },
  ];

  const renderContent = () => {
    return (
      <>
        <Row gutter={24}>
          <Col {...colStyle}>
            <FormItem name="applyer" label="申请人">
              <Input disabled={true}/>
            </FormItem>
          </Col>
          <Col {...colStyle}>
            <FormItem name="unitname" label="申请部门">
              <Input disabled={true}/>
            </FormItem>
          </Col>
          <Col {...colStyle}>
            <FormItem name="jobname" label="申请人岗位">
              <Input disabled={true}/>
            </FormItem>
          </Col>
          <Col {...colStyle}>
            <FormItem name="promotionCode" label="晋升人字文">
              <Input disabled={true}/>
            </FormItem>
          </Col>
          <Col {...colStyle}>
            <FormItem name="urlIds" label="附件详情" >
              {fileUrl && <a href={fileUrl} target="_blank">点击查看</a>}
            </FormItem>
          </Col>
          <Card title="晋升人员" bordered={false} className='widthStyle' style={{marginBottom: 24}}>
            <FormItem name="employeeEducation">
              <Table
                rowKey="oid"
                columns={columns}
                dataSource={data}
                pagination={false}
              />
            </FormItem>
          </Card>
          <Col span={24}>
            <FormItem name="reason" labelCol={{span: 2}} label="晋升原因">
              <TextArea disabled={true} rows={8} className='widthStyle'/>
            </FormItem>
          </Col>
        </Row>
      </>
    )
  };

  const renderFooter = () => {
    return (
      <>
        <Button type="primary" onClick={() => onFormCancel()}>返回</Button>
      </>
    )
  };

  return (
    <Modal
      width='80%'
      title="专业晋升详情"
      visible={visible}
      footer={renderFooter()}
      onCancel={() => onFormCancel()}
    >
      <Form
        {...formLayout}
        form={form}
        style={{paddingTop: '24px'}}
      >
        {renderContent()}
      </Form>
    </Modal>
  )
}


export default connect(({global}) => ({
  global
}))(Details)
